import React from 'react';
import ReactDOM from 'react-dom';

interface Props {

}

class Form extends React.Component<Props> {
  textInput: React.RefObject<TextInput>;

  getFocus = () => {
    // this.textInput.current!.input.current!.focus();
    this.textInput.current!.getFocus();
  };

  constructor(props: Props) {
    super(props);
    this.textInput = React.createRef();
  }

  render() {
    return (
      <>
        <TextInput ref={this.textInput}/>
        <button onClick={this.getFocus}>获得焦点</button>
      </>
    )
  }
}

class TextInput extends React.Component {
  input: React.RefObject<HTMLInputElement>;

  constructor(props: Props) {
    super(props);
    this.input = React.createRef();
  }

  getFocus = () => {
    this.input.current!.value = new Date().toLocaleString();
    this.input.current!.focus();
  };

  render() {
    return <input type="text" ref={this.input}/>;
  }
}

ReactDOM.render(<Form/>, document.getElementById('root'));
